// 1. 初始数据
const sliderData = [
  { url: '../images/slider09.jpg', title: '张家界梓山漫居', color: 'rgb(53, 167, 4, .5)' },
  { url: '../images/slider10.jpg', title: '杭州君悦酒店', color: 'rgb(43, 35, 26, .5)' },
  { url: '../images/slider11.jpg', title: '无锡雪浪宋品酒店', color: 'rgb(99, 127, 203, .3)' },
  { url: '../images/slider12.jpg', title: '三亚龙湾天域度假酒店', color: 'rgb(85, 231, 214, .5)' }

]

let i = 0
//1.获取右侧按钮
const next = document.querySelector('.next')

const img = document.querySelector('.slider-wrapper img')
const footer = document.querySelector('.slider-footer')
const p = document.querySelector('.slider-footer p')

next.addEventListener('click', function () {
  i++

  i = i >= sliderData.length ? i = 0 : i

  common()
})

//2.获取左侧按钮
const prev = document.querySelector('.prev')
prev.addEventListener('click', function () {
  i--

  i = i < 0 ? i = 3 : i

  common()
})

//渲染页面
function common() {
  img.src = sliderData[i].url
  p.innerHTML = sliderData[i].title
  footer.style.backgroundColor = sliderData[i].color

  //删除小圆点
  document.querySelector('.slider-indicator .active').classList.remove('active')
  //给当前li添加小圆点
  document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}

//3.自动播放模块
let timeId = setInterval(function () {
  //利用js自动调用点击事件  click()  
  next.click()
}, 2000)

//4.鼠标经过停止定时器
const slider = document.querySelector('.slider')
//注册事件
slider.addEventListener('mouseenter', function () {
  clearInterval(timeId)
})

//5.鼠标离开开启定时器  先关再开
//注册事件
slider.addEventListener('mouseleave', function () {
  //停止定时器
  clearInterval(timeId)
  //开启定时器
  timeId = setInterval(function () {
    //利用js自动调用点击事件  click()  
    next.click()
  }, 2000)
})

